<template>
  <view class="xuniList" :style="bgStyle">
    <view class="selectBtn flex flex-align">
      <view :class="tabInx==1?'flex-1 active':'flex-1'" @click="tabSelect(1)">收入明细</view>
      <view :class="tabInx==2?'flex-1 active':'flex-1'" @click="tabSelect(2)">支出明细</view>
    </view>
    <view class="shopList">
      <view class="fenHeader flex flex-align flex-bt">
        <view class="left flex flex-align">
          <uni-datetime-picker type="daterange" @change="changeLog" v-model="dateRange">{{dateRange[0]}}--{{dateRange[1]}}</uni-datetime-picker>
          <image src="/static/shop/shop15.png"  mode="scaleToFill" />
        </view>
        <view class="left flex flex-align">
          <view>全部收入类型</view>
          <image src="/static/shop/shop15.png"  mode="scaleToFill" />
        </view>
      </view>
      <view class="xuniItem" v-if="goods_info">
        <scroll-view style="height:calc(100vh - 340rpx);" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
            :refresher-threshold="100" refresher-background="#fff" @scrolltolower="onBottom"
            @refresherrefresh="onRefresh">
          <view class="recordList">
            <view class="recordItem" v-for="(item,index) in goods_info" :key="index">
              <view class="record flex flex-align flex-bt" v-if="!item.goods_name">
                <view class="left">
                  <view>{{item.business_name}}</view>
                  <view class="time">{{timestampToDateTime(item.create_at)}}</view>
                </view>
                <view class="right">
                  <view>{{item.direction==1?'+':'-'}}{{item.amount}}</view>
                  <view class="time">余额: {{item.balance}}</view>
                </view>
              </view>
              <view class="shopItem" v-if="item.goods_name">
                <view class="shopItem-title flex flex-align flex-bt">
                  <view class="name">{{ item.business_name }}</view>
                  <view class="times">{{timestampToDateTime(item.create_at)}}</view>
                </view>
                <view class="shopItem-content flex flex-align flex-bt">
                  <view class="left flex flex-align flex-bt">
                    <view class="img">
                      <image :src="getImgUrl(item.goods_image)" mode="scaleToFill" />
                    </view>
                    <view class="name flex flex-direction flex-bt">
                      <view class="two-omit">{{item.goods_name}}</view>
                      <view class="text">
                        <text v-for="(itm,ins) in item.goods_tag" :key="ins">{{ itm }} <text v-if="ins<(item.goods_specs.length-1)">，</text></text>
                      </view>
                    </view>
                  </view>
                  <view class="right">
                    <view>{{item.direction==1?'+':'-'}}{{item.amount}}</view>
                    <view class="time">余额: {{item.balance}}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        
      </view>
      <view class="xuniItem" v-else style="padding-top: 6vh;box-sizing: border-box;">
        <noData acImg="/static/nodata/noorder.png" content="暂无数据" width="400rpx" color="#969799"></noData>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad} from '@dcloudio/uni-app';
import { ref,reactive} from 'vue'
import { walletDetail } from '@/api/user';
import noData from '@/components/noData.vue';
import { getImgUrl, timestampToDateTime } from '@/utils/tools';
const dataPeizhi = reactive({
  bgImg:'./static/shop/shop14.png',
  name:'礼品卡',
  icon1:'/static/shop/shop13.png',
  icon2:'/static/shop/shop12.png',
  btnBg:'#E86A5B',
  linearGradient:['#E86A5B','#FFAF98'],
  fontCllor:'#FE4927',
  bgColor:'#F1D7D0',
})
const bgStyle = `background:`+dataPeizhi.bgColor

// 获取当前年月日

const dateRange = ref<string[]>([]);
const goods_info = ref<Recordable>([])
const total = ref(0)
const triggered = ref(false);
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
dateRange.value = [formattedDate,formattedDate]
const parme = ref({
  page:1,
  size:10,
  currency_type:'',
  business_type:0,
  direction:1,
  start_at:dateRange.value[0],
  end_at:dateRange.value[1],
})
onLoad((e: any) => {
  parme.value.currency_type = e.id
  getList()
})
function onBottom() {
  if(goods_info.value.length == total.value){
    return
  }
  parme.value.page = parme.value.page + 1
  getList()
}
const tabInx = ref(1)
function tabSelect(index: number) {
  tabInx.value = index
  parme.value.direction = index
  parme.value.page = 1
  getList()
}
// 获取积分商品库
function getList() {
  walletDetail(parme.value).then((res: any) => {
    if(parme.value.page == 1){
      goods_info.value =res.data
    }else{
      goods_info.value =goods_info.value.concat(res.data)
    }
    total.value = res.total
  })
}

function changeLog(e:any){
  parme.value.start_at = dateRange.value[0]
  parme.value.end_at = dateRange.value[1]
  parme.value.page = 1
  getList()
}

function  onRefresh() {
    if (triggered.value) return;
    triggered.value = true;
    parme.value.page = 1
    getList()
    setTimeout(() => {
      triggered.value = false;
    }, 2000);
}


</script>

<style scoped lang="scss">
.xuniList{width: 100vw;height: 100vh;box-sizing: border-box;padding: 26rpx;overflow-y: auto;
  
  .selectBtn{
    .flex-1{font-size: 26rpx;text-align: center;line-height: 88rpx;background: #fff;border-radius: 50rpx;margin-right: 20rpx;font-weight: bold;color: #323233;}
    .active{color: #E86A5B;position: relative;}
    .active::after{position: absolute;bottom: -44rpx;left: 50%;content: '';width: 0;height: 0;border-style: solid;border-width: 0px 28rpx 25rpx 28rpx;
    border-color: transparent transparent #fff transparent;margin-left: -28rpx;}
    .flex-1:last-child{margin-right: 0;}
  }
  .shopList{
    background: #fff;border-radius: 20rpx;padding:10rpx 30rpx 30rpx;margin-top: 40rpx;
    .fenHeader{height: 80rpx;padding: 0;margin: 0 0rpx 26rpx;
      .left{
        image{width: 32rpx;height: 32rpx;}
      }
    }
    .xuniItem{height:calc(100vh - 340rpx);
      .recordList{
       .recordItem{background: #F5F6F7;padding:28rpx 20rpx;margin-bottom: 20rpx;border-radius: 20rpx;line-height:1.7;
        .record{
          .left{width: 50%;font-size: 28rpx;font-weight: bold;
            .time{font-size: 24rpx;color: #969799;font-weight: normal;}
          }
         .right{width: 50%;text-align: right;font-size: 28rpx;font-weight: bold;
            .time{font-size: 24rpx;color: #969799;font-weight: normal;}
          }
        }
        .shopItem{
          .shopItem-title{font-size: 28rpx;font-weight: bold;
            .times{font-size: 24rpx;color: #969799;font-weight: normal;}
          }
          .shopItem-content{margin-top: 20rpx;font-size: 26rpx;
            .left{
              .img{width: 100rpx;height: 100rpx;margin-right:10rpx;
                image{width: 100%;height: 100%;border-radius: 10rpx;}
              }
              .name{width: 300rpx;}
            }
            .right{text-align: right;font-weight: bold;font-size: 28rpx;
            .time{font-size: 24rpx;color: #969799;font-weight: normal;}
            
            } 
          }
          }  
        }
      }
    }
  }
}
.date-picker{position: absolute;z-index: 11;top: 0;left: 0rpx;}
</style>